<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable = no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../_public/css/css.css">
		<script type="text/javascript" src="../_public/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="../_public/js/tigerUI_640.js"></script>
		<script type="text/javascript" src="../_public/js/three3D/three.min.js"></script>
		<script type="text/javascript" src="../_public/js/three3D/MTLLoader.js"></script>
		<script type="text/javascript" src="../_public/js/three3D/OBJMTLLoader.js"></script>
		<style type="text/css">
			canvas { width: 100%; height: 100% ;vertical-align:bottom;}
			body{
				color: #000;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;
				background-color: #fff;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
	</body>
	<script>
		var camera,scene, renderer;
		var mesh,objYuan;
		var speed = 5;
		
		init();
		animate();
		
		function init() {
		//场景
		scene = new THREE.Scene();
		scene.fog = new THREE.Fog( 0xcce0ff, 1000, 4000 );
		
		//镜头
		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
		camera.position.set( 0, 0, 1000 );
		
		//物体
		var texture = THREE.ImageUtils.loadTexture( 'crate.gif' );
		var geometry = new THREE.BoxGeometry( 200, 200, 200 );
		var material = new THREE.MeshBasicMaterial( { map: texture } );
		    mesh = new THREE.Mesh( geometry, material );
		    mesh.position.set( 0, 50, -200 );
		    mesh.castShadow = true;
		    scene.add( mesh );
		
		//模型
		var loader = new THREE.OBJMTLLoader();
		    loader.load( 'yuan.obj', 'yuan.mtl', function ( object ) {
		        objYuan = object;
		        objYuan.position.set( 0, -200, 100 );
		        objYuan.scale.set( 10, 10, 10 );
		        objYuan.castShadow = true;
		        scene.add(objYuan);
		    });
		
		//地面
		var groundTexture = THREE.ImageUtils.loadTexture( "grasslight-big.jpg" );
		    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
		    groundTexture.repeat.set( 25, 25 );
		    groundTexture.anisotropy = 16;
		var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: groundTexture } );
		var meshGd = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
		    meshGd.position.y = -250;
		    meshGd.rotation.x = - Math.PI / 2;
		    meshGd.receiveShadow = true;
		    scene.add( meshGd );
		
		//光源
		scene.add( new THREE.AmbientLight( 0x666666 ) );
		var light;
		var d = 200;
		    light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
		    light.position.set( 50, 200, 100 );
		    light.position.multiplyScalar( 1.3 );
		    //light.shadowCameraVisible = true;
		    //light.castShadow = true;
		    light.shadowMapWidth = 50;
		    light.shadowMapHeight = 50;
		    light.shadowMapDarkness = 0.95;
		    light.shadowCameraLeft = -d;
		    light.shadowCameraRight = d;
		    light.shadowCameraTop = d;
		    light.shadowCameraBottom = -d;
		    light.shadowCameraFar = 1000;
		    light.shadowDarkness = 0.5;
		    scene.add( light );
		
		//渲染器
		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.setClearColor( scene.fog.color );
		renderer.gammaInput = true;
		renderer.gammaOutput = true;
		renderer.shadowMap.enabled = true;
		document.body.appendChild( renderer.domElement );
		}
		
		function animate() {
		requestAnimationFrame( animate );
		
		mesh.rotation.x += 0.005;
		mesh.rotation.y += 0.01;
		
		if(typeof(objYuan) != "undefined"){
		    if(objYuan.position.x >= 100){
		        speed = -speed;
		    }else if(objYuan.position.x <= -100){
		        speed = -speed;
		    }
		    objYuan.position.x += speed;
		}
		
		renderer.render( scene, camera );
		
		}
	</script>
</html>
